[실기] (PART 2) 화면 설계

NOTE

정보처리기사 실기 PART 2 — UI/UX 개념과 UI 설계 원칙·유형 등 화면 설계 핵심 정리.

📌 개념

• UI / UX
• UI : 사용자 인터페이스
• UX : 사용자 경험
• UI 유형
  • CLI : 텍스트
  • GUI : 그래픽 환경
  • NUI : 신체부위
  • OUI :사물
• UI 설계원칙
  • 직관성 : 누구나 쉽게 이해
  • 유연성 : 요구사항 최대 수용
  • 학습성 : 쉽게 배우고
  • 유효성 : 정확 완벽하게 목표 달성
• UI 설계 지침
  • 사용자중심
  • 일관성 : 사용자가 기억하기 쉽고 빠르게 습득
  • 단순성 : 조작방법 단순
  • 결과예측 가능
  • 가시성 : 주요기능을 메인화면에
  • 표준화 : 디자인을 표준화
  • 접근성 : 다양한 계층 수용
  • 명확성 : 개념적으로 쉽게 인지
  • 오류 발생 해결 : 사용자가 오류를 정확하게 인지
• UI 요구사항 구분
  • 기능적 : 시스템, 서비스에 대한 요구사항
  • 비기능적 : 품질에 관한 요구사항 (비용, 일정, 프로젝트 계획 등)
• UI 품질 요구사항
  • 기능성 : 실제 수행 결과 관찰
  • 신뢰성 : 일정 시간 동안 의도하는 기능을 수행함을 확인
  • 사용성 : 사용자와 컴퓨터 사이에 발생한 어떠한 행위를 인지
  • 효율성 : 한정된 자원으로 빨리 처리가능한지
  • 유지보수 : 요구사항 개선
  • 이식성 : 다른 플랫폼으로 적용 가능
• UI 개발을 위한 주요 기법
  • 3C분석 : 고객, 자사, 경쟁사 비교 분석
  • SWOT 분석
  • 시나리오 플래닝 : 시나리오 이용
  • 사용성 테스트 : 사용자가 직접 제품 사용
  • 워크숍 : 연구회 및 세미나
• 스토리보드
  • 구축하는 서비스의 대부분의 정보가 수록됨
  • UI 화면 설계 구현
    • 와이어프레임 : 화면 단위의 레이아웃
    • 스토리보드 : 서비스의 대부분의 정보
    • 프로토타입 : 동적 구성

---

UI설계

• UML
  • 산출물을 명세화, 시각화할 때 사용
• UML 특징
  • 가시화 언어 : 의사소통 용이
  • 구축언어 : 실행시스템의 예측 가능, UML을 소스코드로 변환
  • 명세화언어 : 정확한 모델 , 완전한 모델 작성
  • 문서화 언어 : 시스템 평가 및 의사소통 문서
• UML 구성요소
  • 사물 : 주제를 나타냄 (단어관점 → 동사 or 명사)
  • 관계 : 사물과 사물 연결 ( 단어관점 → 형용사 or 부사)
  • 다이어그램 :사물과 관계를 모아 그림으로 표현한 형태
• UML 다이어그램
  • 구조적 다이어그램(정적 다이어그램) ⇒ 클객 컴배 복패
    • 클래스 다이어그램 : 클래스의 속성 및 연산, 정적인 관계 표현
    • 객체 다이어그램 : 인스턴스 표현
    • 컴포넌트 다이어그램 : 컴포넌트와 그들 사이의 의존 관계
    • 배치 다이어그램 : 컴포넌트 사이의 종속성 표현 및 물리적 요소 위치 표현
    • 복합체 구조 다이어그램 : 복합구조를 가질 경우 내부 구조 표현
    • 패키지 다이어그램 : 그룹화한 패키지들의 관계 표현
  • 행위적 다이어그램 ( 동적 다이어그램) ⇒ 유시커 상활타
    • 유스케이스 다이어그램 : 사용자 관점 표현
    • 시퀀스 다이어그램 :시간적 개념 중심 흐름 표현
    • 커뮤니케이션 다이어그램 : 객체들이 주고 받는 메시지 표현
    • 상태 다이어그램 : 하나의 객체가 자신이 속한 클래스의 상태변화 표현
    • 활동 다이어그램 : 조건에 따른 처리흐름을 순서대로 표현
    • 타이밍 다이어그램 : 객체 상태 변화, 시간제약 명시적 표현